<template>
    <a-modal
        v-bind="defaultModalProps"
        :open="open"
        :width="764"
        class="work-address-modal"
        :body-style="{paddingInline: '32px'}"
        @cancel="handleCancel"
    >
        <template #title>
            <header class="text-sm font-normal flex flex-col gap-[2px] justify-center px-4 border-b border-solid border-b-[#F4F6FC]" style="height: 70px;">
                <h5 class="text-primary">请选择工作地址</h5>
                <p class="text-[#ACAEB2]">请填写真实有效地址，若查实造假，账号将被冻结</p>
            </header>
        </template>
        <template #footer>
            <a-flex align="center" :gap="20" justify="flex-end">
                <a-button type="primary" ghost size="large" style="padding-inline: 40px;" @click="triggerActionModal()">添加地址</a-button>
                <a-button type="primary" size="large" style="padding-inline: 40px;" :disabled="!checkedEntry" @click="handleConfirm()">使用该地址</a-button>
            </a-flex>
        </template>
        <div class="mt-6 h-[320px] overflow-auto" v-if="addressList && addressList.length > 0">
            <div class="t-wrapper">
                <div class="t-header">
                    <div class="t-row">
                        <div class="t-col">地址</div>
                        <div class="t-col">区域</div>
                        <div class="t-col">操作</div>
                    </div>
                </div>
                <div class="t-body">
                    <div class="t-row" v-for="item in addressList" :key="item.id">
                        <div class="t-col">
                            <a-radio class="radio-cls" :checked="item.id === checkedEntry?.id" @change="handleCheck(item)">
                                <div class="truncate">
                                    {{ item.address }}
                                </div>
                            </a-radio>
                        </div>
                        <div class="t-col">
                            {{ item.regionName }}
                        </div>
                        <div class="t-col">
                            <span class="touchable-opacity text-theme" @click="handleView(item)">查看</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <GpEmpty v-else src="/images/empty-novideo.png" description="暂无内容，快去添加吧~"
            img-class="w-[150px] h-[130px]" class="mt-[88px] mb-[140px]" />
    </a-modal>
    <WorkAdressMapModal ref="workAdressMapRef" />
    <WorkAdressActionModal ref="workAdressActionRef" @success="refreshAsync()" />
</template>
<script lang="ts" setup>
import { defaultModalProps } from '@/constants/comp-setting';
import type { Exposed } from './types';
import { getJobGetjobaddresss } from '@/api/siderBar/job';
import type { Exposed as WorkAdressMapModalExposed } from "../WorkAdressMapModal/types"
import type { Exposed as WorkAdressActionModalExposed } from "../WorkAdressActionModal/types"
import type { JobAddressResult } from '@/api/siderBar/model';

defineOptions({
    name: 'WorkAdressModal',
    inheritAttrs: false
})
defineExpose<Exposed>({
    open(checked) {
        if (checked) checkedEntry.value = checked
        open.value = true
    },
})
const emit = defineEmits<{
    select: [address: JobAddressResult]
}>()
const open = ref(false)
const checkedEntry = ref<JobAddressResult>()
const workAdressMapRef = ref<WorkAdressMapModalExposed>()
const workAdressActionRef = ref<WorkAdressActionModalExposed>()
const { data: addressList, refreshAsync } = useRequest(() => getJobGetjobaddresss(), {
    initialData: []
})
function triggerActionModal() {
    if (workAdressActionRef.value) {
        workAdressActionRef.value.open()
    }
}
function handleView(address: JobAddressResult) {
    if (workAdressMapRef.value) {
        workAdressMapRef.value.open(address)
    }
}
function handleCheck(item: JobAddressResult) {
    checkedEntry.value = item
}
function handleCancel() {
    open.value = false
    checkedEntry.value = void 0
}
function handleConfirm() {
    emit('select', checkedEntry.value!)
    handleCancel()
}
</script>
<style lang="less" scoped>
:global(.work-address-modal .ant-modal-content) {
    padding-inline: 0 !important;
    padding-block-start: 0 !important;
}
:global(.work-address-modal .ant-modal-footer) {
    padding-inline: 32px;
}
.radio-cls {
    overflow: hidden;
    white-space: nowrap;
    :deep(span:has(.truncate)) {
        width: 100%;
        overflow: hidden;
    }
}
</style>
<style lang="less" scoped>
.t-wrapper {
    box-sizing: border-box;
    width: 100%;
    .t-header {
        .t-row {
            background-color: #F4F6FC;
            height: 48px;
            color: var(--color-third);
        }
    }
    .t-row {
        height: 56px;
        background-color: #ffffff;
        display: grid;
        grid-template-columns: 328px 268px auto;
        font-size: 14px;
        color: var(--color-primary);
    }
    .t-col {
        padding-inline: 20px;
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .t-body {
        .t-row {
            border-bottom: 1px solid #F4F6FC;
        }
    }
}
</style>